<template>
  <div class="root">
    <!-- <el-button type="primary"  @click="chanPage('/dapin')">BI大屏</el-button>
      <el-button type="primary"  @click="chanPage('/page')">弹窗</el-button>
      <el-button type="primary"  @click="chanPage('/login')">聊天</el-button>
      <el-button type="primary"  @click="chanPage('/pagination')">字典维护</el-button> -->
      <div class="header">
        <div class="header-text">数据字典维护系统</div>
      </div>
      <div class="content">
         <el-container style="width: 100%;position: absolute;left: -10px;">
      <el-aside width="200px">
        <div class="item" @click="ChangeDataList('zidian')">机型字典</div>
        <div class="item" @click="ChangeDataList('ss')" >固定设施</div>
        <div class="item" @click="ChangeDataList('region')">区域</div>
      </el-aside>
      <el-main>
        <div class="search_box">
          <input type="" placeholder="请输入搜索内容" class="input" ref="searchInput" @keyup.enter="searchHandle">
          <el-button type="primary" icon="el-icon-search" @click="searchHandle"></el-button>
        </div>
        <el-button type="primary" style="position:absolute; right: 120px;top: 37px;">
          <i class="icon el-icon-edit" style="font-size: 20px;"></i>导出
        </el-button>
        <el-button type="primary" style="position:absolute; right: 20px;top: 37px;">
          <i class="icon el-icon-upload2" style="font-size: 20px;"></i>导入
        </el-button>
        
        <!-- 添加滚动容器 -->
        <div class="table-scroll-container">
          <el-table
    :data="tableData"
    max-height="630"
    class="el-table">
    <el-table-column
     
      prop="date"
      label="日期"
      width="96">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column label="操作" width="100" >
                <template >
                    <el-button  @click="$refs.popDialog.open()" type="text" size="small" ><i class="el-icon-tickets" style="color:#57B242;font-size: 15px;"></i></el-button>
                    <el-button type="text" size="small"><i class="el-icon-edit" style="color:#3180DD;font-size: 15px;"></i></el-button>
                    <el-button type="text" size="small"><i class="el-icon-delete"  style="color:#D95A5C;font-size: 15px;"></i></el-button>
                </template>
            </el-table-column>
  </el-table>
        </div>
        <Pop ref="popDialog">
      <template v-slot:title>弹窗</template>
      <template v-slot:content>内容区域</template>
    </Pop>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[30]"
          :page-size="30"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentData.length"
          class="pagination"
        >
        </el-pagination>
      </el-main>
    </el-container>
      </div>
   
    <div class="layout-footer">
      <div class="nav-list">
        <div class="btn-item"
        :class="{ active: currentActiveButton === 'dictionary' }"
        @click="handleButtonClick('dictionary')">
          <div class="text">字典维护</div>
        </div>
        <div class="btn-item"
        :class="{ active: currentActiveButton === 'monitor' }"
        @click="handleButtonClick('monitor')">
          <div class="text">实时监视</div>
        </div>
        <div class="btn-item"
        :class="{ active: currentActiveButton === 'history' }"
        @click="handleButtonClick('history')">
          <div class="text">历史回放</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default { 
  data() {
    return {
      zidianData: [],
      ssData: [],
      regionData: [],
       currentActiveButton: 'dictionary',
      currentData: [], // 当前显示的数据
      allData: [], // 存储所有数据
      tableData: [], // 当前页数据
      currentPage4: 1,
      pageSize: 30,
      total: 2000, // 总数据量
      currentType: '' // 新增：记录当前数据类型
    };
  },
  mounted() {
    // 模拟不同数据集，生成2000条数据
    setTimeout(() => {
      const baseData = [];
      for (let i = 1; i <= 2000; i++) {
        baseData.push({
          date: '2016-05-02',
          name: `字典${i}`,
          province: `上海${i}`,
          city: '普陀区',
          address: `上海市普陀区金沙江路 1518 弄${i}`,
          zip: 200333
        });
      }
      this.zidianData = baseData;
      this.ssData = baseData.map((item, index) => ({ ...item, name: `固定设施${index + 1}` }));
      this.regionData = baseData.map((item, index) => ({ ...item, name: `区域数据${index + 1}` }));
      this.currentData = this.zidianData;
      this.currentType = 'zidian'; // 初始化类型
      this.total = this.zidianData.length;
      this.tableData = this.getPagedData();
    }, 1000);
  },
  methods: {
    chanPage(path){
        this.$router.push({ path: path });
      },
      handleButtonClick(type) {
      this.currentActiveButton = type;
      switch(type){
        case 'dictionary':
        this.$router.push('/pagination');
        break;
        case 'monitor':
        this.$router.push('/ssjs');
        break;
        case 'history':
        this.$router.push('/hist');
        break;
      }
    },
    searchHandle() {
    const searchTerm = this.$refs.searchInput.value.trim().toLowerCase();
    if (!searchTerm) {
      // 清空搜索时恢复原始数据
      switch (this.currentType) {
        case 'zidian':
          this.currentData = this.zidianData;
          break;
        case 'ss':
          this.currentData = this.ssData;
          break;
        case 'region':
          this.currentData = this.regionData;
          break;
      }
    } else {
      // 在原始数据进行搜索，而非已过滤的 currentData
      let originalData;
      switch (this.currentType) {
        case 'zidian':
          originalData = this.zidianData;
          break;
        case 'ss':
          originalData = this.ssData;
          break;
        case 'region':
          originalData = this.regionData;
          break;
      }
      this.currentData = originalData.filter(item => {
        return Object.values(item).some(value => {
          return String(value).toLowerCase().includes(searchTerm);
        });
      });
    }
    this.total = this.currentData.length;
    this.currentPage4 = 1;
    this.tableData = this.getPagedData();
  },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;//条数
      this.currentPage4 = 1;//当前页数
      this.tableData = this.getPagedData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage4 = currentPage;
      this.tableData = this.getPagedData();
    },
    getPagedData() {
      // 表格的第一条
      const start = (this.currentPage4 - 1) * this.pageSize;
      console.log('第一条',start)
      const end = start + this.pageSize;
      console.log('最后一条',end);
      return this.currentData.slice(start, end);
    },
    ChangeDataList(type) {
      this.$refs.searchInput.value = "";//左侧切换的时候，清空搜索框内容
      this.currentType = type; //更新当前数据类型
      switch (type) {
        case 'zidian':
          this.currentData = this.zidianData;
          this.total = this.zidianData.length;
          break;
        case 'ss':
          this.currentData = this.ssData;
          this.total = this.ssData.length;
          break;
        case 'region':
          this.currentData = this.regionData;
          this.total = this.regionData.length;
          break;
      }
      this.currentPage4 = 1;
      this.tableData = this.getPagedData();
    }
  }
};
</script>
<style scoped lang="scss">
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
}

.root {
  position: relative;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  background-image:
    url('../../assets/images/dialog/bj.png');
  background-size:
    100% 100%;
  background-position:
    center;
  background-repeat: no-repeat;
}
.header{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-image: url('../../assets/images/layout/header.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .header-text{
      position: absolute;
      color: white;
      font-size: 28px;
      font-weight: 700;
      left: 700px;
      width: 250px;
  }
}
.el-main {
  overflow: hidden; /* 确保el-main不产生滚动 */
  height: 100%;
  display: flex;
  flex-direction: column;
  // border: red 1px solid;
  // width: 390px;
}

.el-container {
  position: absolute;
  height: 90%;
  width: 90%;
  left: 60px;
  top: 30px;
}
.el-aside {
  color: white;
  text-align: center;
  margin-top: 50px;
  line-height: 200px;
  height: 90%;
  border-right: #35a4f3 1px solid;
  .item {
    width: 140px;
    height: 70px;
    border: #35a4f3 1px solid;
    margin-top: 20px;
    line-height: 70px;
    margin-left: 40px;
  }
}
.el-main {
  // overflow: hidden;
  height: 100%;
  color: #333;
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 160px;
  position: relative;
  .search_box{
    position: absolute;
    top: -13px;
    left: 20px;
    .input{
      width:280px;
      height: 42px;
      background: transparent;
      border: #1061d9 1px solid;
      border-radius: 2px;
       color: white !important; // 输入文字颜色，设为白色
}
.input::placeholder {
  color: #999 !important; // 占位符颜色，按需调整
}
    .el-button{
      position: absolute;
      left: 225px;
      top: 63px;
    }
  }
}
.layout-footer{
  color: white;
  cursor:default;
  position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-image: url('../../assets/images/layout/footer.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .nav-list{
      position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 330px;
    .btn-item{
      position: relative;
    width: 95px;
    height: 100%;
    background-image: url('../../assets/images/button/normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: cc-font;
    text-align: center;
    }
    .btn-item.active {
  background-image: url('../../assets/images/button/active.png');
  // 可根据需要添加其他样式
  // color: #2C82BE;
  // transform: scale(1.05);
}
    }
}

.table-scroll-container{

  // width: 690px;
  // border: red 1px solid;
.el-table{
       position: absolute;
       top: 110px;
       left: 10px;
       width: 1410px;
       background: transparent;
       border: #35a4f3 1px solid;
       color: #999;
}

}
::v-deep .el-table__body,
::v-deep .el-table__header{
  width: 100% !important;;
}
::v-deep .el-table td,
::v-deep .el-table th{
  height: 30px !important;
  line-height: 30px !important;
  // border: #1a9adf 1px solid !important;
}
::v-deep .el-table__fixed .el-table__header-wrapper th,
::v-deep .el-table__fixed-right .el-table__header-wrapper th,
::v-deep .el-table__header th.is-leaf {
  height: 36px !important; 
  line-height: 36px !important; 
  // border-bottom: 1px solid #35a4f3 !important;
}
::v-deep.el-table__header-wrapper .el-table__header,
::v-deep .el-table__header th{
  height: 36px !important; 
  line-height: 36px !important; 
  // border: #1a9adf 1px solid !important;

}

::v-deep .el-table__fixed .el-table__fixed-header-wrapper th {
  border-bottom: 1px solid #35a4f3 !important;
}
::v-deep .el-table__row .el-table__cell:not(.el-table__fixed-column) {
    border: none !important;
    border-bottom: none !important;
    border: #1a9adf 1px solid !important;
  }
::v-deep .el-table__header-wrapper th.is-leaf {
  border-bottom: 1px solid #35a4f3 !important;
}
::v-deep .el-table__body tr:hover td{
  height: 30px !important;
  line-height: 30px !important;
  background-color: #315571 !important;
}
::v-deep .el-table td, 
::v-deep th.is-leaf,
::v-deep .el-table th,
::v-deep .el-table tr{
  background: transparent !important;
} 
::v-deep col[name="el-table_1_column_1"] {
  width: 66px !important; /* 强制设置宽度，!important 解决样式优先级问题 */
}
col[name="el-table_25_column_169"] {
  width: 66px !important; /* 强制设置宽度，!important 确保覆盖其他样式 */
}
col[name="el-table_26_column_176"] {
  width: 66px !important; /* 强制设置宽度，!important 确保覆盖其他样式 */
}

::v-deep .el-table__fixed {
  z-index: 10 !important;
  border-right: none !important; /* 左侧固定列右侧边框隐藏 */
  bottom: 0 !important;
  width: 115 !important;
}
::v-deep .el-table__fixed-right {
  bottom: 0 !important;
  z-index: 10 !important;
  border-left: none !important; /* 右侧固定列左侧边框隐藏 */
  
}
// ::v-deep .el-table__body td, 
// ::v-deep .el-table__header th {
//   // border: 1px solid #35a4f3 !important; /* 统一表格边框 */
// }
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table__fixed-header-wrapper .el-table__header .el-table__cell{
  padding: 0 !important;
}
::v-deep .el-table__body-wrapper {background: transparent;}
// 滚动条整体样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 宽度 */
}
// 滚动条轨道
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background:transparent; 
  border-radius: 10px;
}
// 滚动条滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb,
::v-deep .is-scrolling-middle{
  background: #1a9adf; 
  border-radius: 6px;
  bottom: none;
  &:hover {
    background: #555555;
  }
}
::v-deep .el-table__fixed-right-patch
{
  background: transparent;
  // border:1px solid #35a4f3 !important ;
}
::v-deep .el-table td.el-table__cell{
  padding: 0;
}
::v-deep .el-table th.el-table__cell>.cell,
::v-deep .is-leaf{
  padding: 0;
}

// ::v-deep .el-table__body td,
// ::v-deep .el-table__header th {
//   // border: 1px solid #35a4f3 !important; /* 强制设置单元格边框，!important提升优先级 */
// }
// ::v-deep .el-table__row--hover > td {
//   // border: 1px solid #35a4f3 !important; /* 鼠标悬停行的单元格边框 */
// }
::v-deep .el-table td, 
::v-deep th.is-leaf,
::v-deep .el-table th,
::v-deep .el-table tr{
  background: transparent !important;
  // border: 1px solid  #35a4f3 !important;
} 
//分页
.pagination{
  position: absolute;
  left: 770px; 
  top: calc(100% - 53px);
}
::v-deep .el-pagination__total{
  color: #fff;
}
/* 分页透明样式 */
::v-deep .el-pagination {

.el-pagination__total {
    color: white;
}

.el-input__inner {
    background: transparent;
    color: white;
    border: 1px solid #2C82BE;
}
.el-pager .number {
    background: transparent;
    color: white;
}

.el-pager .active {
    color: #2C82BE;
}

.btn-prev,
.btn-quicknext,
.btn-next,
.btn-quickprev {
    background: transparent;
    color: white;
}
.btn-prev,
.btn-next {
    border: 1px solid #2C82BE;
}

.el-pagination__jump {
    color: white;
}
}
</style> 